<template>
  <a-drawer
    title="元素库"
    placement="left"
    :visible="visible"
    :width="300"
    @close="$emit('close')"
    :bodyStyle="{ padding: '12px' }"
    :mask="false"
    :closable="true"
    :destroyOnClose="false"
  >
    <div class="drawer-content">
      <!-- 基础节点 -->
      <div class="element-section">
        <h4>基础节点</h4>
        <div class="element-grid">
          <div 
            class="element-item" 
            @click="$emit('add-node', 'rect', '矩形节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'rect', '矩形节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview rect-node"></div>
            <span>矩形节点</span>
          </div>
          <div 
            class="element-item" 
            @click="$emit('add-node', 'circle', '圆形节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'circle', '圆形节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview circle-node"></div>
            <span>圆形节点</span>
          </div>
          <div 
            class="element-item" 
            @click="$emit('add-node', 'diamond', '菱形节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'diamond', '菱形节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview diamond-node"></div>
            <span>菱形节点</span>
          </div>
        </div>
      </div>

      <!-- 流程节点 -->
      <div class="element-section">
        <h4>流程节点</h4>
        <div class="element-grid">
          <div 
            class="element-item" 
            @click="$emit('add-node', 'start', '开始节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'start', '开始节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview start-node"></div>
            <span>开始节点</span>
          </div>
          <div 
            class="element-item" 
            @click="$emit('add-node', 'process', '处理节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'process', '处理节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview process-node"></div>
            <span>处理节点</span>
          </div>
          <div 
            class="element-item" 
            @click="$emit('add-node', 'end', '结束节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'end', '结束节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview end-node"></div>
            <span>结束节点</span>
          </div>
          <div 
            class="element-item" 
            @click="$emit('add-node', 'decision', '判断节点')"
            draggable="true"
            @dragstart="onDragStart($event, 'decision', '判断节点')"
            @dragend="onDragEnd"
          >
            <div class="element-preview decision-node"></div>
            <span>判断节点</span>
          </div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'ElementDrawer',
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    currentEdgeType: {
      type: String,
      default: 'normal'
    }
  },
  methods: {
    onDragStart(event, type, label) {
      event.dataTransfer.setData('text/plain', JSON.stringify({ type, label }))
      event.dataTransfer.effectAllowed = 'copy'
      
      // 添加拖拽时的视觉反馈
      event.target.style.opacity = '0.5'
      
      // 设置拖拽图像
      const dragImage = event.target.cloneNode(true)
      dragImage.style.position = 'absolute'
      dragImage.style.top = '-1000px'
      document.body.appendChild(dragImage)
      event.dataTransfer.setDragImage(dragImage, 20, 20)
      
      // 清理拖拽图像
      setTimeout(() => {
        document.body.removeChild(dragImage)
      }, 0)
    },
    onDragEnd(event) {
      // 恢复拖拽元素的样式
      event.target.style.opacity = '1'
    }
  }
}
</script>

<style scoped>
.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.element-section {
  margin-bottom: 20px;
}

.element-section h4 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #515a6e;
}

.element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.element-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  user-select: none;
}

.element-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.element-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}

.element-item.active {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ecf5ff;
}

.element-item[draggable="true"] {
  cursor: grab;
}

.element-item[draggable="true"]:active {
  cursor: grabbing;
}

.element-preview {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-color: #f0f0f0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #606266;
  position: relative;
}

.rect-node {
  background-color: #EFF4FF;
  border: 2px solid #5F95FF;
  border-radius: 8px;
}

.circle-node {
  background-color: #F6FFED;
  border: 2px solid #52C41A;
  border-radius: 50%;
}

.diamond-node {
  background-color: #FFF7E6;
  border: 2px solid #FA8C16;
  transform: rotate(45deg);
}

.diamond-node::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #FFF7E6;
  border: 2px solid #FA8C16;
  transform: rotate(-45deg);
}

.start-node {
  background-color: #EFF4FF;
  border: 2px solid #5F95FF;
  border-radius: 50%;
}

.process-node {
  background-color: #F6FFED;
  border: 2px solid #52C41A;
  border-radius: 8px;
}

.end-node {
  background-color: #FFF7E6;
  border: 2px solid #FA8C16;
  border-radius: 50%;
}

.decision-node {
  background-color: #FFF1F0;
  border: 2px solid #F5222D;
  transform: rotate(45deg);
}

.decision-node::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #FFF1F0;
  border: 2px solid #F5222D;
  transform: rotate(-45deg);
}

.normal-edge {
  background: linear-gradient(90deg, #5F95FF 0%, #5F95FF 100%);
  height: 2px;
  border: none;
  border-radius: 1px;
}

.smooth-edge {
  background: linear-gradient(90deg, #5F95FF 0%, #5F95FF 100%);
  height: 2px;
  border: none;
  border-radius: 1px;
  position: relative;
}

.smooth-edge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    #5F95FF 3px,
    #5F95FF 6px
  );
}

.step-edge {
  background: linear-gradient(90deg, #5F95FF 0%, #5F95FF 100%);
  height: 2px;
  border: none;
  border-radius: 1px;
  position: relative;
}

.step-edge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    #5F95FF 2px,
    #5F95FF 4px
  );
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style> 